<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>任务进展</span>
                </h3>
                <span class="m-section__sub">
                    导管加工情况
                </span>
            </div>           
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-form m-form--label-align-right">
                    <form class="horizontal-form" (ngSubmit)="getReport()">
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="FilterPicNo" class="control-label">图号</label>
                                    <input id="FilterPicNo" type="text" name="FilterPicNo" class="form-control"
                                        [(ngModel)]="filterProductionDrawingCode">
                                </div>
                            </div>     
                            <div class="col-md-3">
                                <div class="form-group">
                                        <button (click)="getReport()" class="btn btn-primary"><i class="flaticon-refresh
                                            "></i> 刷新</button>
                                </div>
                         </div>                     
                        </div>
                        <div *ngIf="advancedFiltersAreShown" class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="FilterModel" class="control-label">型号</label>
                                    <input id="FilterModel" name="FilterModel" type="text" class="form-control"
                                        [(ngModel)]="filterTaskModel">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="FilterPart" class="control-label">工位</label>
                                    <select #sourceNameCombobox
                                            name="sourceName"
                                            class="form-control bs-select"
                                            [(ngModel)]="filterWorkStation">
                                        <option value="" >所有工位</option>
                                        <option *ngFor="let workStation of workStations" [value]="workStation.value" >{{workStation.displayText}}</option>
                                    </select>                                    
                                </div>
                                
                            </div>
                            <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="TeamGroupName" class="control-label">状态</label>
                                        <select #sourceNameCombobox1
                                            name="sourceName1"
                                            class="form-control bs-select"
                                            [(ngModel)]="filterState">
                                            <option value="" >所有状态</option>
                                        <option *ngFor="let state of states" [value]="state.value" >{{state.displayText}}</option>
                                    </select>      
                                    </div>
                             </div>
                             <div class="col-md-3">
                                <div class="form-group">
                                    <label for="TeamGroupName" class="control-label">责任班组</label>
                                    <select #sourceNameCombobox1
                                        name="sourceName1"
                                        class="form-control bs-select"
                                        [(ngModel)]="filterWorkingTeam">
                                        <option value="" >所有班组</option>
                                    <option *ngFor="let wkt of workingTeams" [value]="wkt.workingTeamId" >{{wkt.workingName}}</option>
                                </select>      
                                </div>
                         </div>
                            
                        </div>
                        <div class="row m--margin-bottom-10">
                            <div class="col-sm-6">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-down"></i> 显示更多</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-up"></i> 收起</span>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelperNormalReport.isLoading">
                        <p-table #dataTableNormalProductions 
                            [value]="primengTableHelperNormalReport.records" (onLazyLoad)="getReport($event)"
                            rows="{{primengTableHelperNormalReport.defaultRecordsCountPerPage}}"
                            [paginator]="false" [lazy]="true" scrollable="true" ScrollWidth="100%"
                            responsive="primengTableHelperNormalReport.isResponsive"
                            resizableColumns="primengTableHelperNormalReport.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th pSortableColumn="productionDrawingCode">
                                        图号
                                        <p-sortIcon field="productionDrawingCode"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="state">
                                        状态
                                        <p-sortIcon field="state"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="taskModel">
                                        型号
                                        <p-sortIcon field="taskModel"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="productionSpecial">
                                        规格                                    
                                    </th>
                                    <th pSortableColumn="quantity">
                                        数量                                    
                                    </th>
                                    <th>
                                        班组
                                    </th>
                                    <th pSortableColumn="currentStationName">
                                        工位
                                        <p-sortIcon field="currentStationName"></p-sortIcon>
                                    </th>
                                    <th>
                                        停留时间
                                    </th>   
                                    <th >
                                        操作
                                    </th>                                 
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td>
                                        <span class="ui-column-title">图号</span>
                                        {{ record.productionDrawingCode}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">状态</span>
                                        <span class="m-badge m-badge--success m-badge--wide" *ngIf="record.stateDisplayText == '完成'"> 
                                            {{ record.stateDisplayText}}
                                        </span>
                                        <span class="m-badge m-badge--warning m-badge--wide" *ngIf="record.stateDisplayText == '暂停'"> 
                                            {{ record.stateDisplayText}}
                                        </span>
                                        <span class="m-badge m-badge--info  m-badge--wide" *ngIf="record.stateDisplayText == '进行'"> 
                                            {{ record.stateDisplayText}}
                                        </span>
                                        <span class="m-badge m-badge--danger   m-badge--wide" *ngIf="record.stateDisplayText == '报废'"> 
                                            {{ record.stateDisplayText}}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="ui-column-title">型号</span>
                                            {{ record.taskModel}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">规格</span>
                                        {{ record.productionSpecial}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">数量</span>
                                        {{ record.quantity}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">班组</span>
                                        {{ record.workingTeamName}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">工位</span>
                                        {{ record.currentStationName}}
                                    </td>

                                    <td>
                                        <span class="ui-column-title">停留时间</span>
                                        <span class="m--font-success" *ngIf="record.durationString<=24">
                                            {{ record.durationString}}
                                        </span>
                                        <span class="m--font-warning" *ngIf="record.durationString>24 && record.durationString<=72">
                                            {{ record.durationString}}
                                        </span>
                                        <span class="m--font-focus" *ngIf="record.durationString>72">
                                            {{ record.durationString}}
                                        </span>
                                    </td> 
                                    <td>
                                        <span class="ui-column-title">操作</span>
                                        <button (click)="print(record.id,record.productionDrawingCode,record.quantity,record.productionSpecial)" class="btn btn-primary"><i class="fa fa-qrcode"></i> 打印</button>
                                      <!-- <button (click)="addRequestion(record.id)" class="btn btn-primary"><i class="fa fa-qrcode"></i> 测试问题</button>-->
                                    </td>                                    
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelperNormalReport.totalRecordsCount == 0">
                            没有数据
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelperNormalReport.defaultRecordsCountPerPage"
                                #paginatorNormal (onPageChange)="getReport($event)"
                                [totalRecords]="primengTableHelperNormalReport.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelperNormalReport.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                共 {{primengTableHelperNormalReport.totalRecordsCount}} 条
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>